import React, { useState, useRef, useEffect } from 'react';
import { Modal, Row, Col, Form, Input, Select } from 'antd';
import type { DraggableData, DraggableEvent } from 'react-draggable';
import Draggable from 'react-draggable';

interface IProps {
  isModalOpen?: boolean;
  setIsModalOpen: (flag: boolean) => void;
  tableSelectedRows?: any;
  addOrExit?: string;
}

const { Option } = Select;

const AddUserManage: React.FC<IProps> = (props) => {
  const { isModalOpen, addOrExit, tableSelectedRows, setIsModalOpen } = props;

  const [disabled, setDisabled] = useState(false);
  const [bounds, setBounds] = useState({
    left: 0,
    top: 0,
    bottom: 0,
    right: 0,
  });
  const draggleRef = useRef<HTMLDivElement>(null);

  const [form] = Form.useForm();

  // 开始拖拽回调
  const onStart = (_event: DraggableEvent, uiData: DraggableData) => {
    const { clientWidth, clientHeight } = window.document.documentElement;
    const targetRect = draggleRef.current?.getBoundingClientRect();
    if (!targetRect) {
      return;
    }
    setBounds({
      left: -targetRect.left + uiData.x,
      right: clientWidth - (targetRect.right - uiData.x),
      top: -targetRect.top + uiData.y,
      bottom: clientHeight - (targetRect.bottom - uiData.y),
    });
  };

  const handleOk = () => {
    // 获取表单数据
    const data = form.getFieldsValue();
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  useEffect(() => {
    if (
      tableSelectedRows &&
      tableSelectedRows.length !== 0 &&
      addOrExit === 'exit'
    ) {
      const tableRecord = tableSelectedRows[0];
      form.setFieldsValue({
        name: tableRecord?.createPeople,
        remark: tableRecord?.kehuhao,
        lovelangue: tableRecord?.id,
      });
    } else {
      form.resetFields();
    }
  }, [tableSelectedRows, addOrExit]);

  return (
    <Modal
      title={
        <div
          style={{
            width: '100%',
            cursor: 'move',
          }}
          onMouseOver={() => {
            if (disabled) {
              setDisabled(false);
            }
          }}
          onMouseOut={() => {
            setDisabled(true);
          }}
        >
          {addOrExit === 'add' ? '新增' : '修改'}
        </div>
      }
      onOk={handleOk}
      onCancel={handleCancel}
      modalRender={(modal) => (
        <Draggable
          disabled={disabled}
          bounds={bounds}
          onStart={(event, uiData) => onStart(event, uiData)}
        >
          <div ref={draggleRef}>{modal}</div>
        </Draggable>
      )}
      open={isModalOpen}
      width="800px"
    >
      <Form
        labelAlign="right"
        labelCol={{ style: { width: 80 } }}
        labelWrap={true}
        form={form}
        name="tableModleDetail"
        style={{ width: '100%' }}
        initialValues={{
          sex: 'man',
          status: 'ok',
        }}
      >
        <Row gutter={24}>
          <Col span={12} offset={-2}>
            <Form.Item label="所属机构" name="lovelangue">
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="类型"
              name="bangdinggong"
              initialValue={'单位类型'}
            >
              <Select disabled allowClear></Select>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={12}>
            <Form.Item
              label="用户账号"
              name="username"
              extra="只可输入数字与字母或者@..."
            >
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="用户姓名" name="name">
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={12}>
            <Form.Item label="联系电话" name="tel">
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="身份证" name="roleId">
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={12}>
            <Form.Item label="性别" name="sex">
              <Select allowClear>
                <Option value="man">男</Option>
                <Option value="woman">女</Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="状态" name="status">
              <Select allowClear>
                <Option value="ok">正常</Option>
                <Option value="nook">不正常</Option>
              </Select>
            </Form.Item>
          </Col>
        </Row>

        <Row gutter={24}>
          <Col span={12}>
            <Form.Item label="备注" name="remark">
              <Input.TextArea />
            </Form.Item>
          </Col>
          <Col span={12}></Col>
        </Row>
      </Form>
    </Modal>
  );
};

export default AddUserManage;
